<template>
  <div>
    <nly-breadcrumb>
      <nly-breadcrumb-item
        icon="nlyfont nly-icon-home-fill"
        to="/"
        text="首页"
      />
      <nly-breadcrumb-item
        icon="nlyfont nly-icon-outlet"
        to="/shop1/goods"
        active
        text="我的陈列柜"
      />
    </nly-breadcrumb>
    <!-- Main content -->
    <div style="clear: both; padding-left: 10px"></div>
    <div class="content" style="padding-left: 10px">
      <div class="flex">
        <RadioGroup
          v-model="data2.state"
          @on-change="changeType1"
          style="float: left; margin-left: 20px"
        >
          
          <Radio :label="2" border>待发货</Radio>
          <Radio :label="3" border>已发货</Radio>
          <Radio :label="4" border>已完成</Radio>
          <Radio :label="5" border>待退款</Radio>
        </RadioGroup>
      </div>
      <br />
      <div class="order-table-top" style="clear: both">
        <div style="width: 30%; text-align: center">订单信息</div>
        <div style="width: 30%; text-align: center">收货人信息</div>
        <div style="width: 20%; text-align: center">支付</div>
        <div style="width: 20%; text-align: center">操作</div>
      </div>
      <div class="orderlist-main" v-for="(item, index) in YUList" :key="index">
        <div class="orderlist-top">
          <div>订单号：{{ item.outTradeNo }}</div>
          <div style="margin-left:10px">
            <img
              v-if="item.account.avatar"
              :src="item.account.avatar"
              alt
              class="avatar"
            />
          </div>
           <div>{{item.account.nickName}}</div>
          <div style="margin-left: 16px">{{ item.createTime }}</div>
          <div style="margin-left: 16px">
            <Tag color="purple" v-if="item.state == 0 "
              >可交易</Tag
            >
            <Tag color="red" v-if="item.state == 1 "
              >正在交易</Tag
            >
            <Tag
              color="green"
              v-if="item.state == 2 "
              >待发货</Tag
            >
            <Tag color="primary" v-if="item.state == 3">已发货</Tag>
            <Tag color="success" v-if="item.state == 4">已完成</Tag>
            <Tag
              color="warning"
              v-if="
                item.state == 5 
              "
              >待退款</Tag
            >
          </div>
        </div>
        <div class="orderlist-body">
          <div class="orderlist-item flex space-between">
            <div class="orderlistleft" style="width:100%">
              <div class="ordergoods" >
                <div style="position:relative;flex-shrink: 0;" class="orderlist-item-image">
                  <img
                    :src="item.img"
                    class="orderlist-item-img image"
                  />
                </div>
                <div style="margin-left:16px;margin-top:10px;">
                  <div class="orderlist-item-name goodsname">{{item.name}}</div>
                  <div class="orderlist-item-norm" >
                    <span>数量:</span>
                    <Tag color="magenta">× {{item.d_num||1}}</Tag>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="orderlist-item-orderlist-consignee">
            <div class="orderlist-user">
              <div class="nickname" :title="item.recipients">
                收货人：{{ item.recipients }}
              </div>
              <div class="nickname" :title="item.phone">
                联系方式：{{ item.phone }}
              </div>
              <div class="nickname" :title="item.address">
                收货地址：{{ item.address }}{{ item.og_detail_address }}
              </div>
            </div>
          </div>
          <div class="orderlist-item-orderlist-actual">
            <div class="orderlist-item-consignee-title">
              <div class>支付金额：￥{{ item.price }}</div>
              <div class>下单时间：{{ item.createTime }}</div>
            </div>
          </div>
          <div class="orderlist-item-orderlist-action">
            <div class="orderlist-item-consignee-orderlist-title2">
            
              <Button
                style="margin-left: 16px"
                type="primary"
                size="small"
                v-if="item.state == 2"
                @click="changeText(item)" 
                >发货</Button
              >
              <Button
                style="margin-left: 16px"
                type="error"
                size="small"
                v-if="
                  item.state == 5
                "
                @click="sureorder(item.id)"
                >退款审核</Button
              >
            </div>
          </div>
        </div>
      </div>
      <br />
      <div class="Page">
        <Page
          :total="total1"
          show-elevator
          show-total
          :page-size="data2.pageSize"
          :current="data2.page"
          @on-change="get_page1"
        />
      </div>
      <Modal
        title="添加快递信息"
        :styles="{ width: '60%' }"
        v-model="modalAddText"
        class-name="vertical-center-modal"
        :footer-hide="true"
      >
        <div>
          <Form
            ref="dataText"
            :model="dataText"
            :rules="ruleDataText"
            :label-width="80"
          >
            <FormItem label="快递单号" prop="coding">
              <Input v-model="dataText.coding" placeholder="请输入快递单号" />
            </FormItem>
            <FormItem label="物流公司" prop="expressage">
              <Select
                v-model="dataText.expressage"
                style="width: 200px"
                placeholder="请选择物流公司"
              >
                <Option
                  v-for="item in List"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="AddText('dataText')">提交</Button>
              <Button @click="ModalClose" style="margin-left: 8px">取消</Button>
            </FormItem>
          </Form>
        </div>
      </Modal>
      <br />
    </div>
  </div>
</template>

<script>
import apis from "@/api/shop1";
export default {
  components: {},
  data() {
    return {
      goodType: [],
      searchText: "",
      modalAddText:false,
      total1: 0,
      data2: {
        page: 1,
        pageSize: 10,
        state: 2,
      },
      dataText: {
        coding: "",
        expressage: ""
      },
      List: [
        {
          value: "yunda",
          label: "韵达快递"
        },
        {
          value: "yuantong",
          label: "圆通速递"
        },
        {
          value: "zhongtong",
          label: "中通快递"
        },
        {
          value: "youzhengguonei",
          label: "邮政快递包裹"
        },
        {
          value: "huitongkuaidi",
          label: "百世快递"
        },
        {
          value: "shentong",
          label: "申通快递"
        },
        {
          value: "shunfeng",
          label: "顺丰速运"
        },
        {
          value: "jd",
          label: "京东物流"
        },
        {
          value: "tiantian",
          label: "天天快递"
        },
        {
          value: "ems",
          label: "EMS"
        },
        {
          value: "debangwuliu",
          label: "德邦"
        }
      ],

      tableheader2: [
        {
          title: "ID",
          key: "o_id",
          width: 100,
          align: "center",
        },
        {
          title: "下单人名称",
          key: "o_people",
          width: 170,
          align: "center",
        },
        {
          title: "下单人头像",
          slot: "avatar",
          width: 120,
          align: "center",
        },
        {
          title: "电话号码",
          key: "o_tel",
          width: 170,
          align: "center",
        },
        {
          title: "所用金额",
          key: "d_money",
          width: 170,
          align: "center",
        },
        {
          title: "下单数量",
          key: "d_num",
          width: 100,
          align: "center",
        },
        {
          title: "订单号",
          key: "out_trade_no",
          align: "center",
          tooltip: true,
          width: 200,
        },
        {
          title: "商品",
          key: "go_name",
          width: 155,
          align: "center",
        },
        {
          title: "商品图片",
          slot: "go_img",
          width: 120,
          align: "center",
        },

        {
          title: "下单时间",
          key: "o_time",
          width: 180,
          align: "center",
        },
        {
          title: "操作",
          slot: "action",
          width: 170,
          fixed: "right",
          align: "center",
        },
      ],
      YUList: [],
      count_scale: [],
      enteralldata: [],
        ruleDataText: {
        expressage: [
          { required: true, message: "物流单号不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.get_order2();
  },
  methods: {
    changeText(data) {
      console.log("打开模态框");
      this.dataText.id = data.id;
      this.dataText.coding = data.coding;
      this.dataText.expressage = data.expressage;
      this.modalAddText = true;
    },
    ModalClose() {
      this.modalAddText = false;
      this.dataText.id = "";
      this.dataText.coding = "";
      this.dataText.expressage = "";
    },
     AddText() {
      var that = this;
      apis
        .addWuliu({
          id: this.dataText.id,
          coding: this.dataText.coding,
          expressage: this.dataText.expressage
        })
        .then(response => {
          let resdata = response.data;
          if (resdata.code == 0) {
            that.modalAddText = false;
            this.dataText.id = "";
            this.dataText.coding = "";
            this.dataText.expressage = "";
            that.$Message.success("添加成功");
            this.data2.state=3
            that.get_order2();

          }
        });
    },
   
    startsure(val) {
      console.log(val);
      this.data2.o_start_time = val;
      this.get_order2();
    },
    endsure(val) {
      console.log(val);
      this.data2.o_end_time = val;
      this.get_order2();
    },
    arrSplit(str) {
      if ((str || "").split(",")[0]) {
        return str.split(",")[0];
      } else {
        return "";
      }
    },
    get_order2() {
      apis
        .getsorder(this.data2)
        .then((response) => {
          if (response.data.code == 0) {
            this.YUList = response.data.data.list;
            this.total1 = response.data.data.total;
            console.log(this.YUList);
          } else {
            this.$Message.error("请求失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$Message.error("请求失败!");
        });
    },
    get_page1(page) {
      this.data2.page = page;
      this.get_order2();
    },
    changeType1(val) {
      this.data2.page = 1;
      this.data2.state = val;
      console.log(this.data2);
      this.get_order2();
    },
    search1(val) {
      this.data2.page = 1;
      let data2 = this.data2;
      data2.par = val;
      this.get_order2();
    },
    enterall(e) {
      this.enteralldata = e;
      console.log(e);
    },
    updateorder(order) {
      console.log(order);
      this.$Modal.confirm({
        title: "订单状态改变确认",
        content: `确定改变此订单状态？改变后无法撤回`,
        onOk: () => {
          apis.updateorder({ out_trade_no: order }).then((response) => {
            if (response.data.code == 200) {
              this.$Message.success("成功");
              this.get_order2();
            } else {
              this.$Message.error("失败");
            }
          });
        },
        onCancel: () => {},
      });
    },
    refuseorder(order) {
      console.log(order);
      this.$Modal.confirm({
        title: "订单取消确认",
        content: `确定取消此订单？取消后无法撤回`,
        onOk: () => {
          apis.sureorder({ outTradeNo: order, audit: 0 }).then((response) => {
            if (response.data.code == 200) {
              apis.refusemoney({ out_trade_no: order }).then((response) => {
                if (response.data.code == 200) {
                  this.$Message.success("取消成功");
                  this.get_order2();
                } else {
                  this.$Message.error("失败");
                }
              });
            } else if (response.data.code == 202) {
              this.$Message.success("取消成功");
              this.get_order2();
            } else {
              this.$Message.error("失败");
            }
          });
        },
        onCancel: () => {},
      });
    },
    sendorder(order) {
      console.log(order);
      this.$Modal.confirm({
        title: "订单发货确认",
        content: `确定给此订单发货？`,
        onOk: () => {
          apis.sendorder({ out_trade_no: order }).then((response) => {
            if (response.data.code == 200) {
              this.$Message.success("成功");
              this.get_order2();
            } else if (response.data.code == 202) {
              this.$Message.success("成功");
              this.get_order2();
            } else {
              this.$Message.error("失败");
            }
          });
        },
        onCancel: () => {},
      });
    },
    sureorder(id) {
      console.log(id);
      this.$Modal.confirm({
        title: "退款确认",
        content: `确定给此订单退款？`,
        okText: "退款",
        cancelText: "拒绝",
        onOk: () => {
          apis.sureorder({ id:id }).then((response) => {
            if (response.data.code == 200) {
              var _this = this;
              _this.$Message.success("成功");
            } else if (response.data.code == 0) {
              this.$Message.success("成功");
              this.get_order2();
            } else {
              this.$Message.error("失败");
            }
          });
        },
        onCancel: () => {
          apis.nosureorder({ id: id }).then((response) => {
            if (response.data.code == 0) {
              this.$Message.success("拒绝成功");
              this.get_order2();
            } else {
              this.$Message.error("失败");
            }
          });
        },
      });
    },
    deleteYU(id) {
      console.log(id);
      let o_id = "";
      if (id) {
        o_id = id;
      } else {
        this.enteralldata.map((itme) => {
          if (o_id == "") {
            o_id = itme.o_id;
          } else {
            o_id += "," + itme.o_id;
          }
        });
      }
      console.log(o_id);
      this.$Modal.confirm({
        title: "删除确认",
        content: `确定删除此订单？删除后无法恢复`,
        onOk: () => {
          apis.deleteYU({ o_id: o_id }).then((response) => {
            if (response.data.code == 200) {
              this.$Message.success("删除成功");
              this.get_order2();
            } else {
              this.$Message.error("删除失败");
            }
          });
        },
        onCancel: () => {},
      });
    },
  },
};
</script>

<style scoped>
.ivu-btn {
  margin-bottom: 0px;
}
.Page {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-bottom: 10px;
}
.booktime {
  width: 220px;
  margin: auto;
}
.orderlist-item-orderlist-action {
  width: 20%;
  border-left: 1px solid #f3f5f6;
  position: relative;
}
.actual-price {
  font-size: 15px;
  color: #19be6b;
}
.orderlist-item-orderlist-actual {
  width: 20%;
  border-left: 1px solid #f3f5f6;
  text-align: center;
  position: relative;
}
.orderlist-item-consignee-orderlist-title2,
.orderlist-item-consignee-title {
  position: absolute;
  left: 38%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: left;
}
.orderlist-item-orderlist-distributor {
  width: 15%;
  border-left: 1px solid #f3f5f6;
  text-align: center;
  font-size: 16px;
  padding: 10px;
  position: relative;
}
.orderlist-item-consignee-orderlist-title2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.orderlist-user {
  margin: 2px 20px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.orderlist-item-orderlist-consignee {
  width: 30%;
  border-left: 1px solid #f3f5f6;
  text-align: center;
  font-size: 16px;
  padding: 10px;
  position: relative;
}
.orderlist-user > .nickname {
  line-height: 20px;
  font-size: 14px;
  text-align: left;
  margin-bottom: 6px;
}
.orderlist-user > .quanbu {
  line-height: 16px;
  font-size: 14px;
  text-align: left;
}
.orderlist-user > .dingji {
  text-align: center;
}
.orderlist-price {
  color: #ed4014;
}
.orderlist-item-price {
  margin-top: 10px;
  margin-bottom: 15px;
}
.orderlist-item-norm {
  margin-top: 10px;
}

.orderlist-item-num {
  margin-left: 10px;
}
.orderlist-item-image {
  width: 100px;
  height: 100px;
}
.orderlist-item-img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
}
.orderlist-item {
  width: 30%;
  padding: 10px;
}
.ordergoods {
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
}
.orderlist-main {
  margin-bottom: 10px;
  border: 1px solid #f3f5f6;
  border-radius: 5px;
  background-color: white;
}

.orderlist-main:hover {
  border: 1px solid #39f;
  border-radius: 5px;
}
.orderlist-top {
  background-color: #f3f5f6;
  height: 65px;
  padding: 20px;
  display: flex;
  align-items: center;
  border-radius: 5px;
}
.magein {
  background-color: #f3f5f6;
  height: 25px;
  padding: 0px 20px 20px 20px;
  display: flex;
  align-items: center;
  border-radius: 5px;
}

.orderlist-time {
  color: #909399;
}
.avatar {
  height: 30px !important;
  width: 30px !important;
  display: block;
  float: left;
  border-radius: 50%;
  margin-right: 10px;
}

.orderlist-body {
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.app-order-title,
.order-datapic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.order-datapic {
  height: 50px;
}

.order-Datag {
  margin-bottom: 10px;
  margin-top: 10px;
  height: 42px;
  border-bottom: 3px solid #f3f5f6;
}

.index-button1 {
  position: absolute;
  left: 40px;
  top: 13px;
  width: 5vw;
  margin-left: 10px;
}
.order-table-top {
  background-color: #f3f5f6;
  height: 42px;
  line-height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.order-footer2 {
  background-color: #ecf0f5;
  height: 42px;
}

.order-footer1 {
  background-color: #fff;
  height: 20px;
}
.Page {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-bottom: 10px;
}
</style>